<template>
  <div class="page">
    <div class="J-gasstation" v-if='!isData'>
      <get-data :scroller-data="getGassList" :page="12" :config="config"  ref="scroller" :type="type">
        <div class="gass-item">
          <router-link :to="'/gassshow?id='+item.id" v-for="item in getGassList.data" class="weui-cell">
            <div class="weui-cell__hd" style="position: relative;margin-right: 25px;">
              <img :src="item.gsLogo?URL+item.gsLogo:avatar" style="width: 50px;display: block">
            </div>
            <div class="weui-cell__bd">
              <div class="name">{{item.gsName}}</div>
              <rate v-model="item.syntheticalLevel"
                    disabled
                    show-text
                    :colors="['#28be58', '#28be58', '#28be58']"
                    text-color="#28be58"
                    text-template="{value}"></rate>
              <div class="pos"><i class="j-icon-pos"></i>{{item.gsAddress}}</div>
            </div>
          </router-link>
        </div>
      </get-data>
    </div>
    <no-data :title="title" v-else='isData'></no-data>
  </div>
</template>
<script>
  const config = require('~src/config')
  import { mapGetters } from 'vuex'
  import GetData from '~components/mixins/getData.vue'
  import NoData from '~components/mixins/no-data.vue'
  import rate from '~components/mixins/rate.vue'
  const util = require('~src/lib/util')
  export default {
    name: 'card',
    data () {
      return {
        URL: config._API_,
        avatar: config._URL_ + '/static/images/avatar.png',
        isData: false,
        type: 'getGassList',
        title: '暂时找不到油站信息',
        iscroller: true,
        config:{
          page: "1"
        }
      }
    },
    computed: {
      ...mapGetters({
        getGassList: 'getGassList'
      })
    },
    components: {
      GetData,
      NoData,
      rate
    },
    mounted () {
      var _this = this
      if (_this.getGassList.data.length == 0 || _this.getGassList.code == '404') {
        _this.$store.dispatch('getGassList',this.config)
      }
      if (_this.getGassList.code == '404') {
        this.isData = true
      }
    }
  }
</script>
<style lang="scss">
  .J-gasstation{
    .weui-cell{
      background-color: #fff;
    }
    .weui-cell:before{
      bottom:0;
      left:0
    }
    .name{
      font-size:14px;
      color:#333
    }
    .j-rate__icon{
      font-size:16px;
      margin-right:3px;
    }
    .pos{
      color:#666;
      margin-top:4px;
      font-size:12px;
      .j-icon-pos:before{
        font-size:16px;
      }
    }
  }
</style>
